<template>
	<view class="smart" :style="{'min-height':minH}">
		<view class="smart-header">
			<view class="header-search">
				<view class="home-search-form">
					<button aria-label="搜索" data-test="input_button" type="submit">
						<image src="@/static/images/icon/search.png" mode=""></image>
					</button>
					<input ref="search" type="search" v-model="searchParam.ps_search" placeholder="搜索" @keyup.13="handleSearch"/>
				</view>
			</view>
			<view class="smart-sel">
				<view class="sel-left">
					<view :class="'comprehensive' + (selType == 1 ? ' sel-action': '')" @click="handleSort(1,{sort:'1'})">
						<text>综合</text>
					</view>
					<view :class="'price' + (selType == 2 ? ' sel-action': '')" @click="handleSort(2,{sort:'2'})">
						<text>价格</text>
					</view>
					<view :class="'new'  + (selType == 3 ? ' sel-action': '')" @click="handleSort(3,{sort:'3'})">
						<text>新品</text>
					</view>
				</view>
				<view :class="'sel-right' + (selType == 4 ? ' sel-action': '')"> 
					<HM-filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
								:updateMenuName="true" @confirm="confirm" dataFormat="Object"></HM-filterDropdown>
				</view>
			</view>
		</view>
		<view class="smart-goods">
			<view class="smart-notice box" v-if="notice.text">
				{{notice.text}}
			</view>
			<view class="smart-goods-list">
				<mescroll-body ref="mescrollRef" :down="downOption" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
					<view>
						<uni-grid :column="2" :show-border="false"  :square="false">
							<uni-grid-item v-for="(item,index) in list" :key="index">
								<view class="goods-item" @click="handleGoodDetail(item)">
									<view class="">
										<image src="../../static/images/16050187_30449811_480.jpg" mode="aspectFit"></image>
									</view>
									<view class="goods-brand">
										{{item.goods_brand || item.t}}
									</view>
									<view class="goods-name">
										{{item.goods_name}}
									</view>
									<view class="goods-price">
										{{item.goods_sale_price}}
									</view>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import {globalMixin} from '@/util/globalMixin.js'
	import HMFilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue'
	import {getHomeCategoryList} from '@/api/category.js'
	import {getGoodsListPage,getCategoryGoodsListPage} from '@/api/goods.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[globalMixin,MescrollMixin],
		components: {
			HMFilterDropdown
		},
		data() {
			return {
				emptyOption: {
					icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
					tip: '~ 暂无相关商品 ~', // 提示
				},
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption:{
					noMoreSize: 4, 
					empty:{
						tip: '~ 搜索无商品 ~',
						btnText: '去看看'
					}
				},
				searchParam:{},
				winH: 0,
				selType: 1,
				keyword: '',
				notice: {
					text: '预售商品限时包邮，了解详情>',
					link: ''
				},
				defaultSelected: [],
				list: [],
				filterData: [
					{
						"name":'筛选',
						"type": 'hierarchy-column',
						"submenu": [{
								"name": '全部',
								"value": "0"
							}],
					},
				]
			}
		},
		onLoad(options) {
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		},
		mounted() {
			this.initH()
			this.initTopCategory()
		},
		methods: {
			emptyClick(){
				uni.showToast({title: "点击了去逛逛"})
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.findGoodList(this.selType == 4 ? 1 : 0)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.searchParam.page = page.num
				this.searchParam.page_size = page.size
				this.findGoodList(this.selType == 4 ? 1 : 0,true)
			},
			handleSearch() {
				console.log(this.keyword)
				this.$refs.search.blur();
			},
			handleGoodDetail(item) {
				if(item) {
					uni.navigateTo({
						url:"/pages/smart/detail?id="+item.uid
					})
				}
			},
			findGoodList(type,isUp) {
				let result = null;
				let params = this.searchParam
				if(type == 1) {
					result = getCategoryGoodsListPage({...params,supid:this.getSupId(),order_field:'register_date',order_type:'desc'})
				} else {
					result = getGoodsListPage({...params,supid:this.getSupId(),order_field:'register_date',order_type:'desc'})
				}
				
				result.then(res=>{
					if(res.code== 0) {
						let items = res.data.items || []
						this.mescroll.endSuccess();
						this.mescroll.endBySize(items.length || 0 , res.data.total_result || 0);
						if(isUp) {
							console.log(1)
							this.list = this.list.concat(items);
						} else {
							console.log(2)
							this.list = items
						}
					} else {
						this.list = []
					}
				}).catch(()=>{
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			mapTree (org) {
			    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
			    return {
			　　　　 //分别将我们查询出来的值做出改变他的key
			        name: org.category_name,
			        value: org.uid,
			        data: {...org},
			        //判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
			        submenu: haveChildren ? org.children.map(i => this.mapTree(i)) : []
			    };
			},
			//接收菜单结果
			confirm(e) {
				this.keyword = null
				this.indexArr = e.index;
				this.valueArr = e.value;
				console.log(this.valueArr)
				let sel = this.valueArr[0]
				this.selType = 4
				let searchType = 1
				if(!sel[0]) {
					searchType = 0
				}
				this.searchParam = {cat_uid:sel[0]}
				this.findGoodList(searchType)
			},
			initTopCategory() {
				let result = getHomeCategoryList({supid:this.getSupId()})
				result.then(res=>{
					if(res.code == 0) {
						let data = res.data || []
						data.forEach(item =>{
							this.filterData[0].submenu.push(this.mapTree(item))
						})
					}
				})
			},
			handleSort(type,params) {
				this.selType = type
				this.searchParam = params
				this.downCallback()
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
				    }
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.smart {
	background-color: #FFFFFF;
	.header-search {
		margin: 10rpx 20rpx;
		.home-search-form {
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			border: 0.1rpx solid #727272;
			border-radius: 10rpx;
			background-color: #fff;
			input {
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				padding: 0 20rpx;
			}
			button {
				height: 84rpx;
				line-height: 84rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin: 0;
				padding: 0 0 0 20rpx;
				vertical-align: middle;
				border: 0;
				background: transparent;
				border-radius: 0;
				font-weight: 400;
				text-decoration: none;
				text-align: center;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: pointer;
				background-image: none;
				touch-action: manipulation;
				image {
					height: 40rpx;
					width: 40rpx;
				}
			}
			button:after {
				border: 0;
			}
		}
	}
	.box {
		padding: 20rpx 40rpx;
	}
	.smart-notice {
		padding: 20rpx 0;
		background-color: #f5f5f5;
		font-weight: 530;
		text-align: center;
	}
	.smart-sel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		padding: 0 40rpx;
		.sel-left {
			display: flex;
			color: #949494;
			.price,.new {
				margin-left: 40rpx;
			}
		}
		.sel-right {
			color: #949494;
		}
		.sel-action {
			color: black;
		}
	}
	.smart-goods-list {
		uni-grid-item {
			&:nth-child(odd) {
				.goods-item{
					border-right: 1rpx solid $uni-border-color;
				}
			}
		}
		.goods-item {
			border-bottom: 1rpx solid $uni-border-color;
			border-width: 1rpx;
			text-align: center;
			padding: 20rpx 0 40rpx 0;
			.goods-brand {
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				margin-top: 20rpx;
				font-weight: 550;
				padding: 0 20rpx;
			}
			.goods-name {
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				margin-top: 10rpx;
				padding: 0 20rpx;
			}
			.goods-price {
				margin-top: 40rpx;
			}
			image {
				max-width: 100%;
			}
		}
	}
}
</style>
